<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="handle-add mr10"
          @click="addregions"
          size="small"
        >
          添加拼团商品
        </el-button>
        <el-select
          v-model="class_first_id"
          @change="setfirst"
          placeholder="请选择一级分类"
          size="small"
          class="mr10"
        >
          <el-option
            v-for="(item, index) in firstlist"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          ></el-option>
        </el-select>
        <el-select
          v-model="class_second_id"
          placeholder="请选择二级分类"
          size="small"
          class="mr10"
          @change="setsecond"
        >
          <el-option
            v-for="(item, index) in secondlist"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          ></el-option>
        </el-select>
        <el-select
          v-model="class_third_id"
          placeholder="请选择三级分类"
          size="small"
          class="mr10"
          @change="getData"
        >
          <el-option
            v-for="(item, index) in thirdlist"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          ></el-option>
        </el-select>
        <el-input
          v-model="keyword"
          placeholder="关键词"
          class="handle-input mr10"
          size="small"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getData"
          class="mr10"
          size="small"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="tableData"
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="title" label="商品简介"></el-table-column>
        <el-table-column label="展示图片" align="center">
          <template slot-scope="scope">
            <el-image
              class="table-td-thumb"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="market" label="商品价格"></el-table-column>
        <el-table-column prop="stock" label="商品库存"></el-table-column>
        <el-table-column prop="duration" label="拼团时长"></el-table-column>
        <el-table-column prop="number" label="拼团人数"></el-table-column>
        <el-table-column prop="price" label="拼团价格"></el-table-column>
        <el-table-column prop="market" label="市场价"></el-table-column>
        <!-- <el-table-column prop="participate" label="参与次数"></el-table-column> -->

        <el-table-column prop="sort" label="排序">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sort"
              @blur="shortcutUpdateGoods(scope.row, 'sort')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品上架" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.state == 0 ? 'danger' : 'success'"
              @click="shortcutUpdateGoods(scope.row, 'state')"
              >{{ scope.row.state == 0 ? "下架" : "上架" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="addregion(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 编辑/添加弹出框 -->
    <el-dialog
      :title="type ? '编辑' : '添加'"
      :visible.sync="editVisible"
      width="60%"
    >
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="拼团价格"
          ><el-input
            v-model="form.price"
            placeholder="请输入拼团价格"
          ></el-input
        ></el-form-item>
        <el-form-item label="市场价"
          ><el-input v-model="form.market" placeholder="请输入市场价"></el-input
        ></el-form-item>
        <el-form-item label="拼团人数"
          ><el-input
            v-model="form.number"
            placeholder="请输入拼团人数"
          ></el-input
        ></el-form-item>
        <el-form-item label="拼团时长"
          ><el-input
            v-model="form.duration"
            placeholder="请输入拼团时长，以分钟为记"
          ></el-input
        ></el-form-item>
        <!-- <el-form-item label="参与次数"
          ><el-input v-model="form.participate"></el-input
        ></el-form-item> -->
        <el-form-item label="库存"
          ><el-input v-model="form.stock"></el-input
        ></el-form-item>
      </el-form>
      <div v-if="!form.ID">
        <el-input
          v-model="keywords"
          placeholder="关键词"
          class="handle-input mr10"
          size="small"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getDatas"
          class="mr10"
          size="small"
          >搜索</el-button
        >
        <el-table
          :data="tableDatas"
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          v-loading="loadings"
        >
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="title" label="商品简介"></el-table-column>
          <el-table-column prop="price" label="商品价格"></el-table-column>
          <el-table-column prop="stock" label="商品库存"></el-table-column>
          <el-table-column label="展示图片" align="center">
            <template slot-scope="scope">
              <el-image
                class="table-td-thumb"
                :src="scope.row.img"
                :preview-src-list="[scope.row.img]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="text" icon="el-icon-edit" @click="form.goods_id=scope.row.ID">选择</el-button> -->
              <el-radio-group
                v-model="form.goods_id"
                size="small"
                @click="form.goods_id = scope.row.ID"
              >
                <el-radio v-model="radios" :label="scope.row.ID">选择</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChanges"
            @current-change="handlePageChanges"
            :current-page="querys.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="querys.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotals"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 20,
      },
      querys: {
        pageIndex: 1,
        pageSize: 20,
      },
      upimg: {
        token: "",
        key: new Date().valueOf(),
      },
      code: 0,
      upload: "",
      editVisible: false,
      tableData: [],
      tableDatas: [],
      pageTotal: 0,
      pageTotals: 0,
      imageUrl: "",
      videoUrl: "",
      type: 0,
      navlist: [],
      keyword: "",
      keywords: "",
      loading: false,
      loadings: false,
      class_first_id: "",
      class_second_id: "",
      class_third_id: "",
      firstlist: [],
      secondlist: [],
      thirdlist: [],
      form: {
        price: "",
        market: "",
        number: "",
        duration: "",
        goods_id: "",
        // participate: "",
        stock: "",
      },
      radios: "2",
      radio3: "",
    };
  },
  created() {
    this.getNAV();
    this.getDatas();
  },
  methods: {
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getData();
    },
    //修改size值
    handleSizeChanges(val) {
      console.log(`每页 ${val} 条`);
      this.querys.pageSize = val;
      this.getDatas();
    },
    // 修改商品信息
    shortcutUpdateGoods(e, type) {
      if (type == "is_index") {
        e.is_index = e.is_index ? 0 : 1;
      }
      if (type == "is_hot") {
        e.is_hot = e.is_hot ? 0 : 1;
      }
      if (type == "is_extension") {
        e.is_extension = e.is_extension ? 0 : 1;
      }
      if (type == "state") {
        e.state = e.state ? 0 : 1;
      }
      this.request("admin/shortcutUpdateGoods/", "post", {
        id: e.ID,
        is_index: e.is_index,
        is_hot: e.is_hot,
        is_extension: e.is_extension,
        sort: Number(e.sort),
        state: e.state,
      }).then((res) => {
        this.getData();
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    //商品分区修改
    getoption(e) {
      this.code = e;
    },
    //获取商品分区
    getNAV() {
      this.request("admin/partition/", "get", {
        page: this.query.pageIndex,
        size: this.query.pageSize,
      }).then((res) => {
        this.navlist = [{ ID: 0, name: "全部" }, ...res.data.data];
        // this.code = res.data.data[0].ID

        this.getData();
      });
      this.request("admin/firstClass/", "get", {
        page: 1,
        size: 100,
        keyword: "",
      }).then((res) => {
        this.firstlist = res.data.data;
      });
    },
    //获取2级分类
    setfirst() {
      this.class_second_id = "";
      this.request("admin/secondClass/", "get", {
        class_first_id: this.class_first_id,
        page: 1,
        size: 100,
        keyword: "",
      }).then((res) => {
        this.secondlist = res.data.data;
        this.getData();
      });
    },
    //获取3级分类
    setsecond() {
      this.class_third_id = "";
      this.request("admin/thirdClass/", "get", {
        class_second_id: this.class_second_id,
        page: 1,
        size: 100,
        keyword: "",
      }).then((res) => {
        this.thirdlist = res.data.data;
        this.getData();
      });
    },
    //获取数据
    getData() {
      this.loading = true;
      this.request("admin/teamwork/add_goods/", "get", {
        page: this.query.pageIndex,
        size: this.query.pageSize,
        keyword: this.keyword,
        class_first_id: this.class_first_id,
        class_second_id: this.class_second_id,
        class_third_id: this.class_third_id,
      }).then((res) => {
        // console.log(res)
        this.tableData = res.data.data;
        this.pageTotal = res.data.total;
      });
      this.loading = false;
    },
    //获取数据
    getDatas() {
      this.loadings = true;
      this.request("admin/add_goods/", "get", {
        page: this.querys.pageIndex,
        size: this.querys.pageSize,
        keyword: this.keywords,
      }).then((res) => {
        // console.log(res)
        this.tableDatas = res.data.data;
        this.pageTotals = res.data.total;
      });
      this.loadings = false;
    },
    // 编辑
    handleEdit(e) {
      // console.log(e.content)
      this.$router.push({
        path: "/commodity/addbargaining",
        query: { id: e.ID },
      });
    },
    cancel() {
      this.editVisible = false;
      this.getData();
    },
    // 修改排序
    operations(e, code) {
      // console.log(e)
      e.sort = Number(e.sort);
      // console.log(e)
      this.request("admin/add_news/", "put", e).then((res) => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
        } else {
          this.$message.error(res.errmsg);
        }
      });
      this.editVisible = false;
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.request("admin/teamwork/add_goods/", "delete", {
          ID: row.ID,
        }).then((res) => {
          if (res.errno == 0) {
            this.$message.success(res.errmsg);
            this.tableData.splice(index, 1);
            this.getData();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion(e) {
      this.editVisible = true;
      this.form = e;
      this.type = 1;
    },
    // 添加砍价商品
    addregions(id) {
      this.type = 0;
      this.form = {
        price: "",
        market: "",
        number: "",
        duration: "",
        goods_id: "",
        stock: "",
      };
      this.editVisible = true;
    },
    // 添加
    saveEdit() {
      this.form.price = Number(this.form.price);
      this.form.market = Number(this.form.market);
      this.form.number = Number(this.form.number);
      this.form.duration = Number(this.form.duration);
      this.form.goods_id = Number(this.form.goods_id);
      this.form.stock = Number(this.form.stock);
      // if(this.form.duration>24){
      //   this.$message.error('最大时长24小时');
      //   return false
      // }
      this.request(
        "admin/teamwork/add_goods/",
        this.type == 0 ? "post" : "put",
        this.form
      ).then((res) => {
        console.log(res);

        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData();
          this.editVisible = false;
        } else {
          // data.img_list=  eval('('+this.form.img_list+')')
          this.$message.error(res.errmsg);
        }
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    // 分页导航
    handlePageChanges(val) {
      this.$set(this.querys, "pageIndex", val);
      this.getDatas();
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
